<template>
  <div class="merchant-apply-form">
    <!-- 面包屑导航 -->
    <div
      class="container mx-auto px-4 py-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800"
    >
      <Breadcrumb
        :items="[
          { path: '/', title: '首页' },
          { path: '/merchant/apply', title: '商家入驻' },
          { title: type === 'mall' ? '文创商城商家申请' : '酒店商家申请' },
        ]"
      />
    </div>

    <!-- 页面头部 -->
    <div class="page-header bg-white dark:bg-gray-800 shadow-sm">
      <div class="container mx-auto px-4 py-6">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
              {{ type === "mall" ? "文创商城商家申请" : "酒店商家申请" }}
            </h1>
            <p class="text-gray-600 dark:text-gray-400 mt-2">
              请认真填写以下信息，带
              <span class="text-red-500">*</span> 为必填项
            </p>
          </div>
          <el-button class="back-btn" @click="router.back()">
            <el-icon class="mr-1"><Back /></el-icon>
            返回上一页
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content bg-gray-50 dark:bg-gray-900 min-h-screen py-8">
      <div class="container mx-auto px-4">
        <div class="max-w-5xl mx-auto">
          <!-- 申请进度 -->
          <div class="mb-8">
            <el-steps
              :active="currentStep"
              finish-status="success"
              process-status="process"
            >
              <el-step
                v-for="(step, index) in steps"
                :key="index"
                :title="step.title"
                :description="step.description"
              />
            </el-steps>
          </div>

          <form @submit.prevent="handleSubmit" class="space-y-6">
            <!-- 基本信息 -->
            <div v-show="currentStep === 0" class="form-section">
              <div class="section-header">
                <div class="icon-wrapper bg-blue-100 dark:bg-blue-900/30">
                  <i class="fas fa-user text-blue-600 dark:text-blue-400"></i>
                </div>
                <h2 class="section-title">基本信息</h2>
              </div>

              <div class="form-grid">
                <div class="form-group">
                  <label class="required">商家名称</label>
                  <el-input
                    v-model="form.name"
                    placeholder="请输入营业执照上的商家名称"
                    :maxlength="50"
                    show-word-limit
                  />
                </div>
                <div class="form-group">
                  <label class="required">联系电话</label>
                  <el-input
                    v-model="form.phone"
                    placeholder="请输入商家联系电话"
                    :maxlength="11"
                  />
                </div>
                <div class="form-group">
                  <label class="required">联系人姓名</label>
                  <el-input
                    v-model="form.contactPerson"
                    placeholder="请输入联系人姓名"
                    :maxlength="20"
                  />
                </div>
                <div class="form-group">
                  <label class="required">电子邮箱</label>
                  <el-input
                    v-model="form.email"
                    placeholder="请输入常用电子邮箱"
                    type="email"
                  />
                </div>
              </div>
            </div>

            <!-- 商家地址 -->
            <div v-show="currentStep === 1" class="form-section">
              <div class="section-header">
                <div class="icon-wrapper bg-green-100 dark:bg-green-900/30">
                  <i
                    class="fas fa-map-marker-alt text-green-600 dark:text-green-400"
                  ></i>
                </div>
                <h2 class="section-title">商家地址</h2>
              </div>

              <div class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div class="form-group">
                    <label class="required">所在省份</label>
                    <el-select
                      v-model="form.province"
                      placeholder="请选择省份"
                      class="w-full"
                      @change="handleProvinceChange"
                    >
                      <el-option
                        v-for="item in provinces"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                  <div class="form-group">
                    <label class="required">所在城市</label>
                    <el-select
                      v-model="form.city"
                      placeholder="请选择城市"
                      class="w-full"
                      :disabled="!form.province"
                      @change="handleCityChange"
                    >
                      <el-option
                        v-for="item in cities"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                  <div class="form-group">
                    <label class="required">所在区县</label>
                    <el-select
                      v-model="form.district"
                      placeholder="请选择区县"
                      class="w-full"
                      :disabled="!form.city"
                    >
                      <el-option
                        v-for="item in districts"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </div>
                <div class="form-group">
                  <label class="required">详细地址</label>
                  <el-input
                    v-model="form.address"
                    placeholder="请输入详细地址，如：xx街道xx号"
                    :maxlength="100"
                    show-word-limit
                  />
                </div>
                <div class="form-group">
                  <label>地图定位</label>
                  <div
                    class="map-container h-60 bg-gray-100 dark:bg-gray-800 rounded-lg"
                  >
                    <!-- 地图组件将在这里集成 -->
                    <div
                      class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400"
                    >
                      <p>地图加载中...</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 经营信息 -->
            <div v-show="currentStep === 2" class="form-section">
              <div class="section-header">
                <div class="icon-wrapper bg-yellow-100 dark:bg-yellow-900/30">
                  <i
                    class="fas fa-store-alt text-yellow-600 dark:text-yellow-400"
                  ></i>
                </div>
                <h2 class="section-title">经营信息</h2>
              </div>

              <div class="form-grid">
                <div v-if="type === 'mall'" class="form-group col-span-2">
                  <label class="required">经营类目</label>
                  <el-select
                    v-model="form.categories"
                    placeholder="请选择经营类目（可多选）"
                    multiple
                    class="w-full"
                  >
                    <el-option-group label="文创用品">
                      <el-option label="文具用品" value="stationery" />
                      <el-option label="艺术品" value="artwork" />
                      <el-option label="创意礼品" value="gift" />
                    </el-option-group>
                    <el-option-group label="地方特产">
                      <el-option label="食品" value="food" />
                      <el-option label="饮品" value="beverage" />
                      <el-option label="手工艺品" value="handicraft" />
                    </el-option-group>
                    <el-option-group label="旅游商品">
                      <el-option label="纪念品" value="souvenir" />
                      <el-option label="旅行用品" value="travel" />
                      <el-option label="户外装备" value="outdoor" />
                    </el-option-group>
                  </el-select>
                </div>
                <div v-else class="form-group col-span-2">
                  <label class="required">酒店类型</label>
                  <el-radio-group v-model="form.hotelType" class="w-full">
                    <el-radio label="star">星级酒店</el-radio>
                    <el-radio label="boutique">精品酒店</el-radio>
                    <el-radio label="homestay">民宿</el-radio>
                    <el-radio label="guesthouse">客栈</el-radio>
                  </el-radio-group>
                </div>

                <div class="form-group">
                  <label class="required">营业时间</label>
                  <el-time-picker
                    v-model="form.businessHours.start"
                    placeholder="开始时间"
                    class="w-full"
                    format="HH:mm"
                  />
                </div>
                <div class="form-group">
                  <label class="required">结束时间</label>
                  <el-time-picker
                    v-model="form.businessHours.end"
                    placeholder="结束时间"
                    class="w-full"
                    format="HH:mm"
                  />
                </div>

                <div class="form-group col-span-2">
                  <label class="required">经营范围</label>
                  <el-input
                    v-model="form.businessScope"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入营业执照上的经营范围"
                    :maxlength="500"
                    show-word-limit
                  />
                </div>
              </div>
            </div>

            <!-- 资质文件 -->
            <div v-show="currentStep === 3" class="form-section">
              <div class="section-header">
                <div class="icon-wrapper bg-purple-100 dark:bg-purple-900/30">
                  <i
                    class="fas fa-file-alt text-purple-600 dark:text-purple-400"
                  ></i>
                </div>
                <h2 class="section-title">资质文件</h2>
              </div>

              <div class="space-y-6">
                <div class="form-group">
                  <label class="required">营业执照</label>
                  <el-upload
                    class="upload-container"
                    drag
                    action="/api/upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-upload="beforeUpload"
                    :limit="1"
                  >
                    <i class="fas fa-cloud-upload-alt text-2xl mb-2"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <template #tip>
                      <div class="el-upload__tip">
                        请上传营业执照扫描件或清晰照片，支持 jpg/png/pdf
                        格式，大小不超过 5MB
                      </div>
                    </template>
                  </el-upload>
                </div>

                <div class="form-group">
                  <label class="required">法人身份证</label>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <el-upload
                      class="upload-container"
                      drag
                      action="/api/upload"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-upload="beforeUpload"
                      :limit="1"
                    >
                      <div class="upload-content">
                        <i class="fas fa-id-card text-2xl mb-2"></i>
                        <div class="el-upload__text">上传身份证正面</div>
                      </div>
                    </el-upload>
                    <el-upload
                      class="upload-container"
                      drag
                      action="/api/upload"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-upload="beforeUpload"
                      :limit="1"
                    >
                      <div class="upload-content">
                        <i class="fas fa-id-card text-2xl mb-2"></i>
                        <div class="el-upload__text">上传身份证反面</div>
                      </div>
                    </el-upload>
                  </div>
                  <div class="el-upload__tip mt-2">
                    请上传法人身份证正反面清晰照片，支持 jpg/png
                    格式，大小不超过 2MB
                  </div>
                </div>

                <div v-if="type === 'hotel'" class="form-group">
                  <label class="required">特种行业许可证</label>
                  <el-upload
                    class="upload-container"
                    drag
                    action="/api/upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-upload="beforeUpload"
                    :limit="1"
                  >
                    <i class="fas fa-file-certificate text-2xl mb-2"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <template #tip>
                      <div class="el-upload__tip">
                        请上传特种行业许可证扫描件或清晰照片，支持 jpg/png/pdf
                        格式，大小不超过 5MB
                      </div>
                    </template>
                  </el-upload>
                </div>

                <div class="form-group">
                  <label class="required">商家门头照片</label>
                  <el-upload
                    class="upload-container"
                    drag
                    action="/api/upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-upload="beforeUpload"
                    :limit="3"
                    list-type="picture-card"
                  >
                    <i class="fas fa-store-alt text-2xl mb-2"></i>
                    <div class="el-upload__text">上传店铺门头照片</div>
                    <template #tip>
                      <div class="el-upload__tip">
                        请上传清晰的店铺门头照片，建议上传3张不同角度，支持
                        jpg/png 格式，每张大小不超过 5MB
                      </div>
                    </template>
                  </el-upload>
                </div>
              </div>
            </div>

            <!-- 商家简介 -->
            <div v-show="currentStep === 4" class="form-section">
              <div class="section-header">
                <div class="icon-wrapper bg-indigo-100 dark:bg-indigo-900/30">
                  <i
                    class="fas fa-info-circle text-indigo-600 dark:text-indigo-400"
                  ></i>
                </div>
                <h2 class="section-title">商家简介</h2>
              </div>

              <div class="space-y-6">
                <div class="form-group">
                  <label class="required">商家介绍</label>
                  <el-input
                    v-model="form.description"
                    type="textarea"
                    :rows="6"
                    placeholder="请详细介绍您的商家特色、经营理念等信息"
                    :maxlength="1000"
                    show-word-limit
                  />
                </div>

                <div class="form-group">
                  <label>商家实景照片</label>
                  <el-upload
                    class="upload-container"
                    action="/api/upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-upload="beforeUpload"
                    :limit="9"
                    list-type="picture-card"
                    multiple
                  >
                    <i class="fas fa-images text-2xl mb-2"></i>
                    <div class="el-upload__text">点击上传实景照片</div>
                    <template #tip>
                      <div class="el-upload__tip">
                        可上传商家环境、商品、服务等实景照片，最多9张，支持
                        jpg/png 格式，每张大小不超过 5MB
                      </div>
                    </template>
                  </el-upload>
                </div>
              </div>
            </div>

            <!-- 协议同意 -->
            <div v-show="currentStep === 4" class="form-section">
              <div class="flex items-center space-x-2">
                <el-checkbox
                  v-model="form.agreement"
                  :disabled="!form.platformAgreed || !form.serviceAgreed"
                >
                  我已阅读并同意
                </el-checkbox>
                <a
                  href="#"
                  class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                  @click.prevent="openAgreement('platform')"
                  >《平台入驻协议》</a
                >
                <span class="text-gray-500">和</span>
                <a
                  href="#"
                  class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                  @click.prevent="openAgreement('service')"
                  >《商家服务协议》</a
                >
              </div>
            </div>

            <!-- 步骤导航按钮 -->
            <div class="flex justify-between space-x-4">
              <el-button
                v-if="currentStep > 0"
                type="default"
                @click="handlePrevStep"
              >
                <i class="fas fa-arrow-left mr-2"></i>
                上一步
              </el-button>
              <div class="flex-1"></div>
              <div class="flex space-x-4">
                <el-button
                  v-if="currentStep < steps.length - 1"
                  type="primary"
                  @click="handleNextStep"
                >
                  下一步
                  <i class="fas fa-arrow-right ml-2"></i>
                </el-button>
                <template v-else>
                  <el-button type="info" @click="handleSaveDraft">
                    <i class="fas fa-save mr-2"></i>
                    保存草稿
                  </el-button>
                  <el-button
                    type="primary"
                    native-type="submit"
                    :loading="submitting"
                  >
                    <i class="fas fa-paper-plane mr-2"></i>
                    提交申请
                  </el-button>
                </template>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 预览图片弹窗 -->
    <el-dialog v-model="previewVisible" title="预览">
      <img :src="previewUrl" alt="Preview" class="w-full" />
    </el-dialog>

    <!-- 协议弹窗 -->
    <AgreementDialog
      v-model="platformAgreementVisible"
      type="platform"
      @agree="handleAgreementAgree('platform')"
    />
    <AgreementDialog
      v-model="serviceAgreementVisible"
      type="service"
      @agree="handleAgreementAgree('service')"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Back } from "@element-plus/icons-vue";
import Breadcrumb from "@/components/global/Breadcrumb.vue";
import AgreementDialog from "@/components/merchantapply/AgreementDialog.vue";

const router = useRouter();
const route = useRoute();
const type = ref(route.query.type || "mall");
const currentStep = ref(0);
const submitting = ref(false);
const previewVisible = ref(false);
const previewUrl = ref("");

// 表单数据
const form = reactive({
  name: "",
  phone: "",
  contactPerson: "",
  email: "",
  province: "",
  city: "",
  district: "",
  address: "",
  categories: [],
  hotelType: "",
  businessHours: {
    start: "",
    end: "",
  },
  businessScope: "",
  description: "",
  agreement: false,
  files: {
    license: null,
    idCardFront: null,
    idCardBack: null,
    specialLicense: null,
    storefront: [],
    environment: [],
  },
  platformAgreed: false,
  serviceAgreed: false,
});

// 地区数据（示例）
const provinces = ref([{ label: "广西壮族自治区", value: "guangxi" }]);
const cities = ref([{ label: "贵港市", value: "guigang" }]);
const districts = ref([
  { label: "港北区", value: "gangbei" },
  { label: "港南区", value: "gangnan" },
  { label: "覃塘区", value: "qintang" },
  { label: "平南县", value: "pingnan" },
  { label: "桂平市", value: "guiping" },
]);

// 步骤控制
const steps = [
  { title: "填写信息", description: "填写基本信息" },
  { title: "商家地址", description: "填写地址信息" },
  { title: "经营信息", description: "填写经营相关信息" },
  { title: "资质文件", description: "上传必要证件" },
  { title: "商家简介", description: "填写商家介绍" },
];

// 表单验证规则
const rules = {
  name: [
    { required: true, message: "请输入商家名称", trigger: "blur" },
    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
  ],
  phone: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  contactPerson: [
    { required: true, message: "请输入联系人姓名", trigger: "blur" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入电子邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
  ],
  province: [{ required: true, message: "请选择省份", trigger: "change" }],
  city: [{ required: true, message: "请选择城市", trigger: "change" }],
  district: [{ required: true, message: "请选择区县", trigger: "change" }],
  address: [
    { required: true, message: "请输入详细地址", trigger: "blur" },
    { min: 5, max: 100, message: "长度在 5 到 100 个字符", trigger: "blur" },
  ],
  categories: [
    { required: true, message: "请选择经营类目", trigger: "change" },
  ],
  hotelType: [{ required: true, message: "请选择酒店类型", trigger: "change" }],
  businessHours: {
    start: [
      { required: true, message: "请选择营业开始时间", trigger: "change" },
    ],
    end: [{ required: true, message: "请选择营业结束时间", trigger: "change" }],
  },
  businessScope: [
    { required: true, message: "请输入经营范围", trigger: "blur" },
    { min: 10, max: 500, message: "长度在 10 到 500 个字符", trigger: "blur" },
  ],
  description: [
    { required: true, message: "请输入商家介绍", trigger: "blur" },
    {
      min: 50,
      max: 1000,
      message: "长度在 50 到 1000 个字符",
      trigger: "blur",
    },
  ],
};

// 协议弹窗控制
const platformAgreementVisible = ref(false);
const serviceAgreementVisible = ref(false);

// 表单引用
const formRef = ref(null);

// 处理协议同意
const handleAgreementAgree = (type) => {
  if (type === "platform") {
    form.platformAgreed = true;
  } else {
    form.serviceAgreed = true;
  }
  form.agreement = form.platformAgreed && form.serviceAgreed;
};

// 打开协议
const openAgreement = (type) => {
  if (type === "platform") {
    platformAgreementVisible.value = true;
  } else {
    serviceAgreementVisible.value = true;
  }
};

// 验证当前步骤
const validateCurrentStep = async () => {
  if (!formRef.value) return true;

  try {
    const validateFields = {
      0: ["name", "phone", "contactPerson", "email"],
      1: ["province", "city", "district", "address"],
      2:
        type.value === "mall"
          ? [
              "categories",
              "businessHours.start",
              "businessHours.end",
              "businessScope",
            ]
          : [
              "hotelType",
              "businessHours.start",
              "businessHours.end",
              "businessScope",
            ],
      3: [], // 文件上传步骤不需要表单验证
      4: ["description"],
    };

    await formRef.value.validateFields(validateFields[currentStep.value]);
    return true;
  } catch (error) {
    return false;
  }
};

// 修改下一步处理函数
const handleNextStep = async () => {
  const isValid = await validateCurrentStep();
  if (!isValid) {
    ElMessage.warning("请完善必填信息");
    return;
  }

  if (currentStep.value < steps.length - 1) {
    currentStep.value++;
  }
};

// 修改提交处理函数
const handleSubmit = async () => {
  if (!form.agreement) {
    ElMessage.warning("请阅读并同意相关协议");
    return;
  }

  try {
    await formRef.value.validate();

    // 验证文件上传
    if (!form.files.license) {
      ElMessage.warning("请上传营业执照");
      return;
    }
    if (!form.files.idCardFront || !form.files.idCardBack) {
      ElMessage.warning("请上传法人身份证正反面");
      return;
    }
    if (type.value === "hotel" && !form.files.specialLicense) {
      ElMessage.warning("请上传特种行业许可证");
      return;
    }
    if (form.files.storefront.length === 0) {
      ElMessage.warning("请上传商家门头照片");
      return;
    }

    submitting.value = true;

    try {
      await ElMessageBox.confirm(
        "确认提交商家入驻申请吗？提交后将无法修改信息。",
        "确认提交",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        },
      );

      // 模拟提交
      await new Promise((resolve) => setTimeout(resolve, 2000));

      ElMessage.success("申请提交成功！我们将在1-3个工作日内完成审核");
      router.push("/merchant/status");
    } catch (error) {
      if (error !== "cancel") {
        ElMessage.error("提交失败，请稍后重试");
      }
    } finally {
      submitting.value = false;
    }
  } catch (error) {
    ElMessage.warning("请完善必填信息");
  }
};

// 处理地区选择
const handleProvinceChange = (value) => {
  form.city = "";
  form.district = "";
  // TODO: 根据省份加载城市列表
};

const handleCityChange = (value) => {
  form.district = "";
  // TODO: 根据城市加载区县列表
};

// 文件上传相关方法
const beforeUpload = (file) => {
  const isImage = file.type.startsWith("image/");
  const isPDF = file.type === "application/pdf";
  const isLt5M = file.size / 1024 / 1024 < 5;

  if (!isImage && !isPDF) {
    ElMessage.error("只能上传图片或PDF文件！");
    return false;
  }
  if (!isLt5M) {
    ElMessage.error("文件大小不能超过 5MB！");
    return false;
  }
  return true;
};

const handlePreview = (file) => {
  previewUrl.value = file.url;
  previewVisible.value = true;
};

const handleRemove = (file, fileList) => {
  // TODO: 处理文件移除逻辑
};

// 保存草稿
const handleSaveDraft = async () => {
  try {
    // TODO: 实现保存草稿逻辑
    ElMessage.success("草稿保存成功！");
  } catch (error) {
    ElMessage.error("保存失败，请稍后重试");
  }
};

// 设置页面标题
onMounted(() => {
  document.title = `${type.value === "mall" ? "文创商城商家" : "酒店商家"}申请 - 贵港文化旅游平台`;
});
</script>

<style lang="scss" scoped>
.merchant-apply-form {
  @apply bg-gray-50 dark:bg-gray-900;

  .page-header {
    @apply mb-0 border-b border-gray-200 dark:border-gray-700;
  }

  .main-content {
    @apply border-t border-gray-200 dark:border-gray-700;
  }

  .form-section {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700;
    transition: all 0.3s ease-in-out;

    .section-header {
      @apply flex items-center space-x-4 mb-6;

      .icon-wrapper {
        @apply w-10 h-10 rounded-full flex items-center justify-center;

        i {
          @apply text-xl;
        }
      }

      .section-title {
        @apply text-xl font-semibold text-gray-900 dark:text-white;
      }
    }
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .col-span-2 {
    @media (min-width: 768px) {
      grid-column: span 2 / span 2;
    }
  }

  .form-group {
    @apply space-y-2;

    label {
      @apply block text-sm font-medium text-gray-700 dark:text-gray-300;

      &.required::after {
        content: "*";
        @apply text-red-500 ml-1;
      }
    }
  }

  .upload-container {
    @apply border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center;

    &:hover {
      @apply border-blue-500 dark:border-blue-400;
    }

    .upload-content {
      @apply flex flex-col items-center;
    }

    .el-upload__tip {
      @apply text-xs text-gray-500 dark:text-gray-400 mt-2;
    }
  }

  // Element Plus 组件样式覆盖
  :deep(.el-input__wrapper),
  :deep(.el-textarea__wrapper) {
    @apply bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600;
  }

  :deep(.el-input__inner),
  :deep(.el-textarea__inner) {
    @apply text-gray-900 dark:text-white;
  }

  :deep(.el-select) {
    @apply w-full;
  }

  :deep(.el-radio) {
    @apply text-gray-700 dark:text-gray-300;
  }

  :deep(.el-checkbox) {
    @apply text-gray-700 dark:text-gray-300;
  }

  :deep(.el-upload-list) {
    @apply text-gray-700 dark:text-gray-300;
  }

  :deep(.el-upload-list__item) {
    @apply bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700;
  }

  // 步骤条样式
  :deep(.el-steps) {
    @apply bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700;
  }

  :deep(.el-step__title) {
    @apply text-gray-700 dark:text-gray-300;
  }

  :deep(.el-step__description) {
    @apply text-gray-500 dark:text-gray-400;
  }

  // 步骤切换按钮样式
  .step-buttons {
    @apply mt-6 flex justify-between items-center;
  }
}
</style>
